<template>
	<div class="main">
		<div class="breadcrumbDiv">
			<el-breadcrumb separator-class="el-icon-arrow-right">
				<el-breadcrumb-item>主页</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="content">
			<div class="">
				{{helloMsg}}
			</div>
			<div class="main-information">
				<div class="mi-card order-amount-card">
					<div>
						<div><span class="">今日订单</span></div>
						<div><span>{{showMsg.goodordernum}}</span></div>
						<div><span>昨日订单：{{showMsg.yestodaygoodordernum}}</span></div>
					</div>
					<div>
						<i class="iconfont iconmiaoshu" style="font-size: 50px;"></i>
					</div>
				</div>
				<div class="mi-card sale-volume-card">
					<div>
						<div><span style="">今日收入</span></div>
						<div><span>￥{{parseFloat(showMsg.Sales).toFixed(0)}}</span></div>
						<div><span>昨日收入：{{parseFloat(showMsg.yestodaysales).toFixed(0)}}</span></div>
					</div>
					<div>
						<i class="iconfont iconjiage" style="font-size: 50px;"></i>
					</div>
				</div>
				<div class="mi-card total-food-card">
					<div>
						<div><span>商品数量</span></div>
						<div><span>{{showMsg.foodtotalsalenum}}</span></div>
						<div><span>昨日销量：{{showMsg.yestodayfoodtotalsalenum}}</span></div>
					</div>
					<div>
						<i class="iconfont iconshangpinshuliang" style="font-size: 50px;"></i>
					</div>
				</div>
				<div class="mi-card new-message-hint">
					<div>
						<div><span>订单</span></div>
						<div><span>{{remindOrderId}}</span></div>
						<div class="cursor-pointer" style="color: #FF0000;" @click="cardHandleOrder" v-show="remindOrderId"><span>处理</span></div>
					</div>
					<div>
						<i class="iconfont icontixing1" style="font-size: 50px;"></i>
					</div>
				</div>
			</div>
			<div class="order-search">
				<el-form ref="form" :inline="true" :model="searchform" label-width="80px" size="medium">
					<el-form-item label="用户名称">
						<el-input v-model="searchform.order_owner_name" style="width:250px"></el-input>
					</el-form-item>
					<el-form-item label="订单号">
						<el-input v-model="searchform.order_id" style="width:250px"></el-input>
					</el-form-item>
					<el-form-item style="position: relative; left: 58%;">
						<el-button type="primary" @click="searchSubmit"><i class="el-icon-search"></i> 搜索</el-button>
					</el-form-item>
				</el-form>
			</div>
			<div class="order-tables">
				<el-tabs type="border-card" @tab-click="tabClick">
					<el-tab-pane label="待处理" :value="14">
						<div>
							<div class="order-table">
								<el-table :data="tableData" style="width: 100%">
									<el-table-column type="selection" width="55px" align="center">
									</el-table-column>
									<el-table-column prop="order_id" label="订单号" sortable>
									</el-table-column>
									<el-table-column prop="order_owner_name" label="用户姓名">
									</el-table-column>
									<el-table-column prop="order_original_price" label="原价" sortable>
									</el-table-column>
									<el-table-column prop="order_true_price" label="实际价格" sortable>
									</el-table-column>
									<el-table-column prop="order_pay_time" width="200px" label="支付时间" sortable>
									</el-table-column>
									<el-table-column prop="userAddress.receiver_address" width="300px" label="收获地址">
									</el-table-column>
									<el-table-column fixed="right" label="操作" width="130" align="center">
										<template slot-scope="scope">
											<el-button @click="dealClick(scope.row)" type="text"><i class="iconfont iconquchuli"></i> 处理</el-button>
										</template>
									</el-table-column>
								</el-table>
							</div>
							<div class="order-page">
								<div class="block">
									<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
									 :page-sizes="[5, 10, 15, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
									</el-pagination>
								</div>
							</div>
						</div>
					</el-tab-pane>
					<el-tab-pane label="处理中" :value="15">
						<div>
							<div class="order-table">
								<el-table :data="tableData" style="width: 100%">
									<el-table-column type="selection" width="55px" align="center">
									</el-table-column>
									<el-table-column prop="order_id" label="订单号" sortable>
									</el-table-column>
									<el-table-column prop="order_owner_name" label="用户姓名">
									</el-table-column>
									<el-table-column prop="order_original_price" label="原价" sortable>
									</el-table-column>
									<el-table-column prop="order_true_price" label="实际价格" sortable>
									</el-table-column>
									<el-table-column prop="order_pay_time" width="200px" label="支付时间" sortable>
									</el-table-column>
									<el-table-column prop="userAddress.receiver_address" width="300px" label="收获地址">
									</el-table-column>
									<el-table-column fixed="right" label="操作" width="130" align="center">
										<template slot-scope="scope">
											<el-button @click="deliveryClick(scope.row)" type="text"><i class="iconfont iconpeisong1"></i> 配送</el-button>
										</template>
									</el-table-column>
								</el-table>
							</div>
							<div class="order-page">
								<div class="block">
									<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
									 :page-sizes="[5, 10, 15, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
									</el-pagination>
								</div>
							</div>
						</div>
					</el-tab-pane>
					<el-tab-pane label="配送中" :value="16">
						<div>
							<div class="order-table">
								<el-table :data="tableData" style="width: 100%">
									<el-table-column type="selection" width="55px" align="center">
									</el-table-column>
									<el-table-column prop="order_id" label="订单号" sortable>
									</el-table-column>
									<el-table-column prop="order_owner_name" label="用户名">
									</el-table-column>
									<el-table-column prop="carrier" label="送餐员">
									</el-table-column>
									<el-table-column prop="carrier_telephone" width="160px" label="送餐员电话">
									</el-table-column>
									<el-table-column prop="order_original_price" label="原价" sortable>
									</el-table-column>
									<el-table-column prop="order_true_price" label="实际价格" sortable>
									</el-table-column>
									<el-table-column prop="userAddress.receiver_address" width="280px" label="收获地址">
									</el-table-column>
									<el-table-column fixed="right" label="操作" width="130" align="center">
										<template slot-scope="scope">
											<el-button @click="completeClick(scope.row)" type="text"><i class="iconfont iconwancheng"></i> 完成</el-button>
										</template>
									</el-table-column>
								</el-table>
							</div>
							<div class="order-page">
								<div class="block">
									<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
									 :page-sizes="[5, 10, 15, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
									</el-pagination>
								</div>
							</div>
						</div>
					</el-tab-pane>
					<el-tab-pane label="已处理" :value="17">
						<div>
							<div class="order-table">
								<el-table :data="tableData" style="width: 100%">
									<el-table-column prop="order_id" label="订单号" sortable>
									</el-table-column>
									<el-table-column prop="order_owner_name" label="用户名">
									</el-table-column>
									<el-table-column prop="carrier" label="送餐员">
									</el-table-column>
									<el-table-column prop="carrier_telephone" width="150px" label="送餐员电话">
									</el-table-column>
									<el-table-column prop="order_original_price" label="原价" sortable>
									</el-table-column>
									<el-table-column prop="order_true_price" label="实际价格" sortable>
									</el-table-column>
									<el-table-column prop="order_pay_time" width="160px" label="支付时间" sortable>
									</el-table-column>
									<el-table-column prop="userAddress.receiver_address" width="250px" label="收获地址">
									</el-table-column>
									<!--<el-table-column fixed="right" label="操作" width="130" align="center">
										<template slot-scope="scope">
											<el-button @click="lookClick(scope.row)" type="text"><i class="el-icon-search"></i> 查看</el-button>
										</template>
									</el-table-column>-->
								</el-table>
							</div>
							<div class="order-page">
								<div class="block">
									<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
									 :page-sizes="[5, 10, 15, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
									</el-pagination>
								</div>
							</div>
						</div>
					</el-tab-pane>
				</el-tabs>
			</div>
		</div>
		<!--接单小窗-->
		<div>
			<el-dialog title="订单详情" top="50px" v-dialogDrag :visible.sync="orderDeailDialogVisible" width="380px" center>
				<div class="dialog-content" v-if="orderDetailLoading">
					<div class="dc-hearder">
						<div>{{orderDetail.orderInfo.order_id}}</div>
						<div>{{orderDetail.orderInfo.userAddress.receiver_address}}</div>
					</div>
					<div class="dc-detail">
						<div class="detail-item" v-for="food of orderDetail.detailList">
							<div>
								<div>{{food.food_name}}</div>
								<div style="font-size: 13px;">{{food.detail_attach}}</div>
							</div>
							<div>{{food.food_amount}}</div>
						</div>
					</div>
				</div>
				<div slot="footer" class="dialog-footer">
					<el-button size="small" @click="orderDeailDialogVisible = false">取消</el-button>
					<el-button size="small" type="primary" @click="orderDeailDialogVisible = false">打印</el-button>
					<el-button size="small" type="primary" @click="receivingOrderClick">接单</el-button>
					<el-button size="small" type="primary" @click="confirmBtnClick('ruleForm')">打印并接单</el-button>
				</div>
			</el-dialog>
		</div>
		<!--发票小窗-->
		<div>
			<el-dialog title="发票" top="40px" v-dialogDrag :visible.sync="invoiceDialogVisible" width="380px" center>
				<div class="dialog-content" v-if="orderDetailLoading">
					<div class="broken-line"></div>
					<div class="dc-hearder">
						<div style="font-size: 18px;">大司马下饭食堂</div>
						<div>{{orderDetail.orderInfo.order_id}}</div>
					</div>
					<div class="dc-detail">
						<div class="in-detail-item" v-for="food of orderDetail.detailList">
							<div>
								<div>{{food.food_name}}</div>
								<div class="item-atam">
									<div style="font-size: 12px;">{{food.detail_attach}}</div>
									<div>{{food.food_amount}}</div>
								</div>
							</div>
							<div>{{food.food_total}}</div>
						</div>
					</div>
					<div class="dc-footer">
						<div class="rece-name">{{orderDetail.orderInfo.userAddress.receiver_name}}</div>
						<div class="rece-address">{{orderDetail.orderInfo.userAddress.receiver_address}}</div>
						<div class="rece-telephone">{{orderDetail.orderInfo.userAddress.receiver_telephone}}</div>
						<div class="f-item">
							<div>原价</div>
							<div>{{(orderDetail.orderInfo.order_original_price).toFixed(2)}}</div>
						</div>
						<div class="f-item">
							<div>立减</div>
							<div>{{(orderDetail.orderInfo.order_original_price - orderDetail.orderInfo.order_true_price).toFixed(2)}}</div>
						</div>
						<div class="f-item">
							<div>合计</div>
							<div>{{(orderDetail.orderInfo.order_true_price).toFixed(2)}}</div>
						</div>
					</div>
					<div class="broken-line" style="margin-top: 5px;"></div>
				</div>
				<div slot="footer" class="dialog-footer">
					<el-button size="small" @click="invoiceDialogVisible = false">取消</el-button>
					<el-button size="small" type="primary" @click="invoiceDialogVisible = false">打印</el-button>
					<el-button size="small" type="primary" @click="toDeliveryClick">配送</el-button>
					<el-button size="small" type="primary" @click="confirmBtnClick('ruleForm')">打印并配送</el-button>
				</div>
			</el-dialog>
		</div>
	</div>
</template>

<script>
	import MainService from './MainService.js';
	import tools from '@/utils/tools.js';
	export default {
		name: 'Main',
		data() {
			return {
				helloMsg: '',

				//三个显示信息
				showMsg: '',

				searchform: {
					order_owner_name: null,
					order_id: null,
					status: 14
				},

				pageNum: 1,
				pageSize: 5,
				total: 50,
				tableData: [],

				//订单详细
				orderDeailDialogVisible: false,
				//发票
				invoiceDialogVisible: false,
				//订单详细和发票共用
				orderDetailLoading: false,
				orderDetail: {},

				//骑手
				carrierList: [],

				remindOrderId: '',
			}
		},
		created() {
			let date = new Date();
			let todayf1 = tools.dateFtt("yyyy年MM月dd日 ", date);
			this.getHelloMsg(todayf1);
			// let todayf2 = tools.dateFtt("yyyy-MM-dd", date);
			this.getnumberoftoday();
			this.getPage(this.pageNum, this.pageSize);

			this.createConnection();
		},
		destroyed() {
			this.wsClose();
		},
		methods: {
			searchSubmit() {
				this.pageNum = 1;
				this.getPage(this.pageNum, this.pageSize);
			},
			tabClick(tab, event) {
				this.searchform.status = tab.$attrs.value;
				this.pageNum = 1;
				this.getPage(this.pageNum, this.pageSize);
			},
			//卡片处理订单
			cardHandleOrder(){
				this.getOrderDetail(parseInt(this.remindOrderId));
				this.orderDeailDialogVisible = true;
			},
			//处理订单
			dealClick(row) {
				this.getOrderDetail(row.order_id);
				this.orderDeailDialogVisible = true;
			},
			//接单
			receivingOrderClick() {
				let goodOrder = new Object();
				goodOrder.order_id = this.orderDetail.orderInfo.order_id;
				goodOrder.status = 15;
				this.updateBack(goodOrder, '接单', ()=>{
					if(goodOrder.order_id == this.remindOrderId){
						this.remindOrderId = '';
					};
				});
				if(goodOrder.order_id == this.remindOrderId){
					this.remindOrderId = '';
				};
				this.orderDeailDialogVisible = false;
			},
			//配送订单
			deliveryClick(row) {
				this.getOrderDetail(row.order_id);
				this.searchByKind(6);  //获得骑手
				this.invoiceDialogVisible = true;
			},
			//去配送订单
			toDeliveryClick() {
				let carrier = this.carrierList[Math.floor((Math.random() * this.carrierList.length))];
				let goodOrder = new Object();
				goodOrder.order_id = this.orderDetail.orderInfo.order_id;
				goodOrder.status = 16;
				goodOrder.carrier = carrier.user_true_name;
				goodOrder.carrier_telephone = carrier.telephone;
				this.updateBack(goodOrder, '配送');
				this.invoiceDialogVisible = false;
			},
			//订单配送完成
			completeClick(row) {
				let goodOrder = new Object();
				goodOrder.order_id = row.order_id;
				goodOrder.status = 17;
				this.updateBack(goodOrder, '订单完成');
			},
			//查看已配送订单
			lookClick(row) {

			},
			handleSizeChange(val) {
				this.pageSize = val;
				this.getPage(this.pageNum, this.pageSize);
			},
			handleCurrentChange(val) {
				this.pageNum = val;
				this.getPage(this.pageNum, this.pageSize);
			},
			getPage(pageNum, pageSize) {
				MainService.getOrderByOrderInfoService(this.searchform, {
					pageNum: pageNum,
					pageSize: pageSize
				}, res => {
					// console.log(res);
					this.tableData = res.searchResult.list;
					this.total = res.searchResult.total;
				})
			},
			//获得订单详情
			getOrderDetail(orderid) {
				MainService.getDetailService({
					orderid: orderid
				}, res => {
					// console.log(res);
					this.orderDetail = res;
					this.orderDetailLoading = true;
				})
			},
			//修改订单
			updateBack(goodOrder, message, callBack) {
				MainService.updateBackService(goodOrder, res => {
					if (res.updateBackResult) {
						this.$message({
							type: 'success',
							message: message + '成功!'
						});
					} else {
						this.$message({
							type: 'error',
							message: message + '失败!'
						});
					};
					this.getPage(this.pageNum, this.pageSize);
					return callBack;
				});
			},
			//获得骑手
			searchByKind(user_kind) {
				MainService.searchByKindService({
					user_kind: user_kind
				}, res => {
					this.carrierList = res.carriersList;
				});
			},
			//欢迎信息
			getHelloMsg(today) {
				this.helloMsg = today + '欢迎回来~';
			},
			//获得当前订单相关信息
			getnumberoftoday() {
				MainService.getnumberoftodayService(res => {
					this.showMsg = res;
				});
			},
			wsOpen() {
				console.log('websocket-连接已经建立');
			},
			wsError() {
				console.log('websocket-出现错误');
			},
			wsClose() {
				this.ws.close();
				console.log('websocket-连接已经关闭');
			},
			wsMessage(event) {
				this.remindOrderId = event.data;
				this.$notify({
					title: '提示',
					message: '新的订单',
					offset: 85,
					type: 'success'
				});
				this.getPage(this.pageNum, this.pageSize);
				this.getnumberoftoday();
				console.log(event.data);
			},
			createConnection(callBack) {
				if ('WebSocket' in window) {
					this.ws = new WebSocket(`ws://localhost:8080/wss`);
					this.ws.onopen = this.wsOpen;
					this.ws.onclose = this.wsClose;
					this.ws.onerror = this.wsError;
					this.ws.onmessage = this.wsMessage;
				} else {
					alert('该浏览器不支持订单提醒!');
				};
			},
		}
	}
</script>

<style scoped lang="less">
	@import '../../style/Common.less';

	.main-information {
		display: flex;
		justify-content: space-between;
		margin-top: 15px;
	}

	.mi-card {
		width: 210px;
		height: 95px;
		padding: 10px 20px;
		// border: 1px solid #FFFFFF;
		border-radius: 10px;
		color: #FFFFFF;
		display: flex;
		justify-content: space-between;
		align-items: center;

		div:nth-child(1) {
			display: flex;
			flex-direction: column;

			div:nth-child(1) {
				font-size: 17px;
			}

			div:nth-child(2) {
				font-size: 30px;
			}

			div:nth-child(3) {
				font-size: 13px;
			}
		}
	}

	.order-amount-card {
		background: linear-gradient(to right, rgb(158, 108, 245), rgb(158, 158, 245));
	}

	.sale-volume-card {
		background: linear-gradient(to right, rgb(249, 124, 159), rgb(249, 174, 189));
	}

	.total-food-card {
		background: linear-gradient(to right, rgb(251, 154, 106), rgb(251, 184, 136));
	}

	.new-message-hint {
		background: linear-gradient(to right, rgb(93, 189, 251), rgb(93, 229, 251));
	}

	.order-search {
		width: 100%;
		height: 80px;
		border: 1px solid #FFFFFF;
		border-radius: 10px;
		margin-top: 20px;
		background-color: #FFFFFF;
		display: flex;
		align-items: center;

		.el-form-item {
			margin-bottom: 0;
			color: #606266;
		}
	}

	.order-tables {
		margin-top: 20px;
		width: 100%;
	}

	.order-page {
		height: 32px;
		margin: 20px 20px 0 0;
		float: right;
	}

	.dialog-content {
		width: 280px;
		margin: 0 auto;
		top: 5px;
	}

	.dc-hearder {
		margin-top: 20px;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.detail-item {
		display: flex;
		justify-content: space-between;
		margin-top: 6px;
	}

	.in-detail-item {
		display: flex;
		justify-content: space-between;
		margin-top: 2px;
	}

	.item-atam {
		display: flex;

		div:nth-child(2) {
			margin-left: 10px;
		}
	}

	.dc-footer {
		margin-top: 12px;

		.rece-name {
			font-size: 18px;
		}

		.rece-address {
			margin-top: 10px;
		}

		.rece-telephone {
			margin-top: 5px;
		}

		.f-item {
			display: flex;
			justify-content: space-between;
			margin-top: 10px;
		}

	}
</style>
